<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail</title>

    <link rel="stylesheet" href="../styles/css/detail.css">

    <script src="../js/detail.js" type="module"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
        </script>
</head>

<body>
    <!-- 头部导航 -->
    <nav>
        <div class="wrapper">

            <div class="nav-left">

                <a href="https://brand.heytap.com/index.html">欢太品牌</a>


                <a href="https://cloud.heytap.com/login.html?callback=https%3A%2F%2Fcloud.heytap.com%2F">欢太云服务</a>

                <a href="https://store.oppomobile.com/">软件商店</a>


                <a href="https://www.heythings-iot.com/health">健康</a>

            </div>

            <div class="nav-right">

                <a href="https://www.oppo.com/cn/download-storeapp/?utm_source=opposhopweb&utm_medium=header"
                    target="_blank" class="down-a">下载欢太商城app
                    <div class="down-logo">
                        <img src="../imgs/qrcode-v3.jpg" alt="">
                        <p>扫描下载欢太商城 APP</p>
                    </div>
                </a>



                <a
                    href="../html/login.html">
                    <span class="glyphicon glyphicon-user"></span>
                    登录
                </a>


                <a
                    href="../html/reg.html">注册</a>


                <a
                    href="../html/shop.html">
                    <span class="glyphicon glyphicon-facetime-video"></span>
                    购物车（<i>0</i>）
                </a>

            </div>

        </div>
    </nav>

    <!-- 头部导航第二部分 -->
    <section class="nav2">
        <div class="wrapper">

            <div class="nav2_l">
                <a href="https://www.heytap.com/cn/web/"><img src="../imgs/logo.png" alt="#" class="nav_logo"></a>
                <a href="https://www.heytap.com/cn/web/topic/700100.html" target="_blank">OPPO专区</a>
                <a href="https://www.heytap.com/cn/web/topic/700200.html" target="_blank">OnePlus专区</a>
                <a href="https://www.heytap.com/cn/web/topic/700300.html" target="_blank">realme专区</a>
                <a href="https://www.heytap.com/cn/web/topic/700400.html" target="_blank">智能生活</a>
                <a href="https://www.heytap.com/cn/web/topic/700500.html" target="_blank">潮流好物</a>
                <a href="https://www.heytap.com/cn/web/service">服务</a>
            </div>

            <div class="nav2_r">
                <input type="text" placeholder="OPPO Reno6星">
                <i class="glyphicon glyphicon-search"></i>
            </div>

        </div>
    </section>


    <!-- 主体 -->
    <main>
        <div class="wrapper">
            <section class="main-1">
                <!-- 视频部分 -->
                <section class="main-1-l">
                    <div class="video-wrapper">
                        <video src="../imgs/detail.movie" controls loop poster="../imgs/video.post.jpg"></video>
                    </div>

                    <div class="swiper">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <img src="../imgs/video.post.jpg" alt="#">
                                <img src="../imgs/video.post.jpg" alt="#">
                                <img src="../imgs/video.post.jpg" alt="#">
                                <img src="../imgs/video.post.jpg" alt="#">
                                <img src="../imgs/video.post.jpg" alt="#">
                                <img src="../imgs/video.post.jpg" alt="#">
                                <img src="../imgs/video.post.jpg" alt="#">
                                <img src="../imgs/video.post.jpg" alt="#">
                                <img src="../imgs/video.post.jpg" alt="#">
                                <img src="../imgs/video.post.jpg" alt="#">
                            </div>
                        </div>
                        <i class="glyphicon glyphicon-menu-left"></i>
                        <b class="glyphicon glyphicon-menu-right"></b>
                    </div>

                </section>

                <!-- 购物车选项 -->
                <section class="main-1-r">
                    <div class="main-title">
                        <!-- <p>OPPO Reno6 5G 星黛紫 8G+128G</p> -->
                    </div>

                    <!-- 主体右第一小块 -->
                    <div class="main-r-1">
                        <div>
                            <span>OPPO手机10元会员券 | 满700元可用</span>
                            <span>6期免息</span>
                            <span>赠 18W快充移动电源</span>
                        </div>

                        <div>
                            <span>详情</span>
                            <i>></i>
                        </div>
                    </div>

                    <!-- 主体右第二小块 -->
                    <div class="main-r-2">
                        <p>【OPPO官方商城 | 赠99元移动电源 | 享6期免息 | 享300元大礼包 | 晒单至高返3千积分】</p>
                        <p>①6400万水光人像镜头，前置3200万像素自拍；</p>
                        <p>②65W超级闪充，快与安全；</p>
                        <p>③90Hz高感屏，流畅顺滑；④36个月流畅护航，五级抗老化认证。</p>
                        <a href="https://www.heytap.com/cn/m/stuCertification/index" target="_blank"></a><a
                            href="">学生领券立减50元，认证完成咨询客服领券>>></a>
                        <br>
                        <a href="https://yihuan.oppo.com/static/index.html#/?channelId=100020"
                            target="_blank">以旧换新最高额外补贴1300元，OPPO会员再享额外补贴 >>></a>
                    </div>

                    <!-- 主体右第三小块 -->
                    <div class="main-r-3">
                        <span>¥</span>
                        <!-- <b>2799</b> -->
                    </div>

                    <!-- 主体右第四块 -->
                    <div class="main-r-4">
                        <div>
                            <div>
                                <img src="../imgs/detail.main4-1.png" alt="">
                                <div>摄像头</div>
                                <div>6400W水光人像</div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src="../imgs/detail.main4-2.png" alt="">
                                <div>充电</div>
                                <div>65W超级快充</div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src="../imgs/detail.main4-3.png" alt="">
                                <div>刷新率</div>
                                <div>90Hz</div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src="../imgs/detail.main4-4.png" alt="">
                                <div>机身厚度</div>
                                <div>7.59mm轻薄</div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src="../imgs/detail.main4-5.png" alt="">
                                <div>运营商网络</div>
                                <div>5G全网通</div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src="../imgs/detail.main4-6.png" alt="">
                                <div>处理器</div>
                                <div>天玑900</div>
                            </div>
                        </div>

                    </div>

                    <!-- 主体右第五块 -->
                    <div class="main-r-5">
                        <p>颜色</p>
                        <div class="phone-color">
                            <!-- <button>夜海</button>
                            <button>星黛紫</button>
                            <button>夏日晴海</button>
                            <button>星河如梦</button> -->
                        </div>
                    </div>

                    <!-- 主体右第六块 -->
                    <div class="main-r-6">
                        <p>配置</p>
                        <div class="phone-rom">
                            <!-- <button>8G+128G</button>
                            <button>12G+256</button>
                            <button>【活力手环套餐 蓝色】12+256G</button>
                            <button>【活力手环套餐 蓝色】8G+128G</button> -->
                        </div>
                        <div>
                            <button>【Enco Air耳机套餐 白色】12+256G</button>
                            <button>【Enco Air耳机套餐 白色】8G+128G</button>
                        </div>
                    </div>

                    <!-- 主体右第七块 -->
                    <div class="main-r-7">
                        <p>数量</p>
                        <div>
                            <button id="numSub">-</button>
                            <input type="number" value="1" max="10" min="1" id="num-shop">
                            <button id="numAdd">+</button>
                            <span>仅限购10件</span>
                        </div>
                    </div>

                    <!-- 主体右第八块 -->
                    <div class="main-r-8">
                        <div>
                            <span>保障服务(可选)</span>
                            <div>
                                <span>购买表示同意</span>
                                <a href="https://dsfs.oppo.com/store/public/files/service_policy_oppo.html"
                                    target="_blank">《保障服务条款》</a>
                            </div>
                        </div>

                        <div>
                            <p>碎屏保</p>
                            <div>
                                <button>一年 ¥179 <del>¥179</del></button>
                                <button>加1元送1年延保 ¥180 <del>¥300</del></button>
                            </div>
                        </div>

                        <div>
                            <span>0享无忧</span>
                            <b>（价值¥359，立省¥161）</b>
                            <div>
                                <button>含屏碎保一年 + 欢太会员年卡 ¥198 <del>¥198</del></button>
                            </div>
                        </div>

                        <div>
                            <p>延长保</p>
                            <div>
                                <button>半年 ¥79 <del>¥79</del></button>
                                <button>一年 ¥129 <del>¥129</del></button>
                            </div>
                        </div>

                        <div>
                            <span>OPPO Care+</span>
                            <div>
                                <button>整机保1年1次+延长保1年+电池焕新 ¥399<del>¥399</del></button>
                            </div>
                        </div>

                        <p>收起其他保障服务 <i class="glyphicon glyphicon-menu-up"></i></p>

                    </div>

                </section>
            </section>

            <!-- 超值加购 -->
            <section class="main-2">
                <div class="main-2-1">
                    <div>
                        <span>超值加购</span>
                        <b>搭配购买更省钱</b>
                    </div>
                    <div>
                        <i class="glyphicon glyphicon-menu-left"></i>
                        <i class="glyphicon glyphicon-menu-right"></i>
                    </div>
                </div>

                <div class="main-2-2">
                    <div class="main-2-2-l">
                        <img src="../imgs/list1-1.png" alt="#">
                        <span>OPPO Reno6</span>
                        <i>¥2799</i>
                    </div>

                    <div>+</div>

                    <div class="main-2-2-r">
                        <div class="wrapper">
                            <div class="common-tog">
                                <img src="../imgs/list1-12.png" alt="#">
                                <span>Reno保护壳</span>
                                <i>¥99 <del>¥299</del></i>
                                <b class="glyphicon glyphicon-ok"></b>
                            </div>
                            <div class="common-tog">
                                <img src="../imgs/list1-12.png" alt="#">
                                <span>灵动版耳机</span>
                                <i>¥99 <del>¥199</del></i>
                                <b class="glyphicon glyphicon-ok"></b>
                            </div>
                            <div class="common-tog">
                                <img src="../imgs/list1-12.png" alt="#">
                                <span>Enco Air耳机</span>
                                <i>¥199 <del>¥299 </del></i>
                                <b class="glyphicon glyphicon-ok"></b>
                            </div>
                            <div class="common-tog">
                                <img src="../imgs/list1-12.png" alt="#">
                                <span>Enco Free2</span>
                                <i>¥499 <del>¥599</del></i>
                                <b class="glyphicon glyphicon-ok"></b>
                            </div>
                            <div class="common-tog">
                                <img src="../imgs/list1-12.png" alt="#">
                                <span>65W 充电器</span>
                                <i>¥149 <del>¥179 </del></i>
                                <b class="glyphicon glyphicon-ok"></b>
                            </div>

                        </div>
                    </div>
                </div>
            </section>

            <!-- 加入购物车 -->
            <section class="main-3">

                <div class="main-3-t">

                    <div>
                        <i>¥</i>
                        <span>2799.00</span>
                        <p>已选:星黛紫 | 8G+128G | 1件</p>
                    </div>

                    <div>
                        <button id="addItem">加入购物车</button>
                        <a
                            href="https://id.heytap.com/index.html?callback=https%3A%2F%2Fwww.heytap.com%2Fcn%2Fweb%2Fproducts%2F20193.html&language=zh-CN&channelId=1000343">立即购买</a>
                    </div>
                </div>

                <div class="main-3-b">
                    <div>
                        <img src="../imgs/gou.svg" alt="">
                        <span>7天价保</span>
                    </div>
                    <div>
                        <img src="../imgs/gou.svg" alt="">
                        <span>官方正品</span>
                    </div>
                    <div>
                        <img src="../imgs/gou.svg" alt="">
                        <span>顺丰包邮</span>
                    </div>
                    <div>
                        <img src="../imgs/gou.svg" alt="">
                        <span>全国联保</span>
                    </div>
                    <div>
                        <img src="../imgs/gou.svg" alt="">
                        <span>官方发货&售后</span>
                    </div>
                    <div>
                        <img src="../imgs/gou.svg" alt="">
                        <span>48H发货</span>
                    </div>
                    <div>
                        <img src="../imgs/gou.svg" alt="">
                        <span>7天无理由退换(激活不可退)</span>
                    </div>

                </div>
            </section>
        </div>


    </main>

    <!-- 详细介绍及评论 -->
    <section class="details">
        <div class="wrapper">

            <!-- 导航 -->
            <div class="details-nav">
                <div>商品详情</div>
                <div>商品参数</div>
                <div>用户评价(5348)</div>
                <div>热门推荐</div>
            </div>

            <div class="details-img">
                <img src="../imgs/tabs1.png" alt="">
                    <img src="../imgs/tabs2.png" alt="">
                    <a href="https://hd.oppo.com/act/m/2021/reno6yushouquanyigui/index.html" target="_blank">
                        <img src="../imgs/tabs3.png" alt="">
                    </a>
                    <a href="https://www.heytap.com/cn/web/products/4022.html?skuId=4022&us=shoujishangxiang&um=w32"
                        target="_blank">
                        <img src="../imgs/tabs4.jpg" alt="">
                    </a>
                    <a href="https://www.heytap.com/cn/web/products/4522.html?skuId=4522&us=shoujishangxiang&um=w52"
                        target="_blank">
                        <img src="../imgs/tabs5.jpg" alt="">
                    </a>

                <!-- 商品详情 -->
                <div class="details-spxq">

                    <img src="../imgs/tabs6.png" alt="">
                    <img src="../imgs/tabs7.png" alt="">
                    <a href="https://www.heytap.com/cn/web/products/4797.html" target="_blank">
                        <img src="../imgs/tabs8.png" alt="">
                    </a>
                    <a href="https://www.heytap.com/cn/web/products/4797.html" target="_blank">
                        <img src="../imgs/tabs9.png" alt="">
                    </a>
                    <a href="https://www.heytap.com/cn/web/products/4797.html" target="_blank">
                        <img src="../imgs/tabs10.png" alt="">
                    </a>
                    <a href="https://www.heytap.com/cn/web/products/4797.html" target="_blank">
                        <img src="../imgs/tabs11.png" alt="">
                    </a>
                    <img src="../imgs/tabs12.png" alt="">
                    <img src="../imgs/tabs13.png" alt="">
                    <img src="../imgs/tabs14.png" alt="">
                    <img src="../imgs/tabs15.png" alt="">
                    <img src="../imgs/tabs16.png" alt="">
                    <img src="../imgs/tabs17.png" alt="">
                    <img src="../imgs/tabs18.png" alt="">
                    <img src="../imgs/tabs19.png" alt="">
                    <img src="../imgs/tabs20.png" alt="">
                    <img src="../imgs/tabs21.png" alt="">

                </div>

                <!-- 商品参数 -->
                <div class="details-spcs">
                    <!-- <img src="../imgs/tabs22.png" alt="">
                    <img src="../imgs/tabs23.png" alt="">
                    <img src="../imgs/tabs24.png" alt="">
                    <img src="../imgs/tabs25.png" alt="">
                    <img src="../imgs/tabs26.png" alt="">
                    <img src="../imgs/tabs27.png" alt="">
                    <img src="../imgs/tabs28.png" alt="">                     -->
                </div>
                
            </div>

            <!-- 评论 -->
            <div class="comment">
                <div class="comment-1">
                    <div>
                        <span>99.8%</span>
                        <b>用户感到满意</b>
                    </div>
                    <div>
                        <div>物流快</div>
                        <div>充电快</div>
                        <div>拍摄专业</div>
                        <div>手感一流</div>
                        <div>流畅至极</div>
                        <div>多次购买</div>
                    </div>
                </div>

                <div class="comment-2">
                    <div>
                        <span class="active">
                            全部 5370
                        </span>
                        <span>
                            晒图 649
                        </span>
                        <span>
                            追评
                        </span>
                    </div>

                    <div>
                        推荐排序
                        <i class="glyphicon glyphicon-triangle-bottom"></i>
                    </div>
                </div>

                <div class="comment-3">
                    <div class="comment-3-l">
                        <div>
                            <i class="glyphicon glyphicon-user"></i>
                            <div>
                                <span>用户252905888</span>
                                <p>2021-06-11 09:14:28</p>
                            </div>
                        </div>
                    </div>

                    <div class="comment-3-r">
                        <div>
                            <img src="../imgs/xingxing.svg" alt="">
                            <img src="../imgs/xingxing.svg" alt="">
                            <img src="../imgs/xingxing.svg" alt="">
                            <img src="../imgs/xingxing.svg" alt="">
                            <img src="../imgs/xingxing.svg" alt="">
                        </div>
                        <div>刚刚收到，一字快，第三次买OPPO，不错，非常喜欢</div>
                        <div>
                            <img src="../imgs/conment---------1.jpg" alt="">
                            <img src="../imgs/comment-------------2.jpg" alt="">
                            <img src="../imgs/comment---------------3.jpg" alt="">
                        </div>
                        <div>
                            <b>追加评论：</b>
                            <span>用过几天，我觉得还可以</span>
                        </div>
                        <div>
                            <img src="../imgs/kefutou.svg" alt="">
                            <span>官方回复：</span>
                            <span>您喜欢的样子我都有，颜值高、拍照好、玩着6，嘻嘻....可以对我一直迷恋哟~~</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 热门推荐 -->
            <div class="recommend">
                
            </div>
        </div>
    </section>




    <!-- 尾部 -->
    <footer>
        <div class="wrapper">
            <div class="footer-1">
                <div>
                    <img src="../imgs/footer1.svg" alt="">
                    <p>一年全国联保</p>
                </div>
                <div>
                    <img src="../imgs/footer2.svg" alt="">
                    <p>7天无理由退货</p>
                </div>
                <div>
                    <img src="../imgs/footer3.svg" alt="">
                    <p>官方换货保障</p>
                </div>
                <div>
                    <img src="../imgs/footer4.svg" alt="">
                    <p>满69元包邮</p>
                </div>
                <div>
                    <img src="../imgs/footer5.svg" alt="">
                    <p>916 家售后网点</p>
                </div>
            </div>

            <div class="footer-2">
                <div class="footer-2-l">
                    <div>
                        <div>关于欢太</div>
                        <a href="https://brand.heytap.com/index.html" target="_blank">了解欢太</a>
                        <a href="https://brand.heytap.com/business.html" target="_blank">欢太产品与服务</a>
                        <a href="https://brand.heytap.com/contact.html" target="_blank">联系我们</a>
                    </div>
                    <div>
                        <div>OPPO产品</div>
                        <a href="https://www.heytap.com/cn/web/products/4747.html" target="_blank">OPPO Reno6</a>
                        <a href="https://www.heytap.com/cn/web/products/4788.html" target="_blank">OPPO Reno6 Pro</a>
                        <a href="https://www.heytap.com/cn/web/products/4795.html" target="_blank">OPPO Reno6 Pro+</a>
                        <a href="https://www.heytap.com/cn/web/products/3459.html" target="_blank">OPPO Find X3 Pro</a>
                        <a href="https://www.heytap.com/cn/web/products/3471.html" target="_blank">OPPO Find X3</a>
                        <a href="https://www.heytap.com/cn/web/products/2739.html" target="_blank">OPPO Reno5</a>
                        <a href="https://www.heytap.com/cn/web/products/4108.html" target="_blank">OPPO K9</a>
                        <a href="https://www.heytap.com/cn/web/products/2295.html" target="_blank">OPPO K7x</a>
                        <a href="https://www.heytap.com/cn/web/products/4161.html" target="_blank">OPPO A95</a>
                        <a href="https://www.heytap.com/cn/web/products/3136.html" target="_blank">OPPO A93</a>
                    </div>
                    <div>
                        <div>一加产品</div>
                        <a href="https://www.heytap.com/cn/web/products/3726.html" target="_blank">OnePlus 9 Pro</a>
                        <a href="https://www.heytap.com/cn/web/products/3880.html" target="_blank">OnePlus 9</a>
                        <a href="https://www.heytap.com/cn/web/products/3903.html" target="_blank">OnePlus 9R</a>
                        <a href="https://www.heytap.com/cn/web/products/2266.html" target="_blank">OnePlus 8T</a>
                        <a href="https://www.heytap.com/cn/web/products/2058.html" target="_blank">OnePlus 8</a>
                        <a href="https://www.heytap.com/cn/web/products/2062.html" target="_blank">OnePlus 8 Pro</a>
                        <a href="https://www.heytap.com/cn/web/products/3690.html" target="_blank">OnePlus Watch</a>
                    </div>
                    <div>
                        <div>realme产品</div>
                        <a href="https://www.heytap.com/cn/web/products/4740.html" target="_blank">真我GT Neo 闪速版</a>
                        <a href="https://www.heytap.com/cn/web/products/3878.html" target="_blank">真我X7 Pro 至尊版</a>
                        <a href="https://www.heytap.com/cn/web/products/4520.html" target="_blank">真我Q3 Pro 狂欢版</a>
                        <a href="https://www.heytap.com/cn/web/products/3126.html" target="_blank">真我V15</a>
                        <a href="https://www.heytap.com/cn/web/products/4745.html" target="_blank">真我Buds Air 2 Neo</a>
                    </div>
                    <div>
                        <div>服务政策</div>
                        <a href="https://hd.oppo.com/act/m/2020/OPPOshouhou/index.html" target="_blank">OPPO售后政策</a>
                        <a href="https://hd.oppo.com/act/m/2020/OnePlus/index.html" target="_blank">一加售后政策</a>
                        <a href="https://hd.oppo.com/act/m/2020/0724/index.html" target="_blank">realme售后政策</a>
                        <a href="https://hd.oppo.com/act/m/2020/peisongshuoming/index.html" target="_blank">配送发货说明</a>
                        <a href="https://hd.oppo.com/act/m/2020/huabeifenqi/index.html" target="_blank">花呗分期说明</a>
                        <a href="https://hd.oppo.com/act/m/2020/dianzifapiao/index.html" target="_blank">电子发票说明</a>
                    </div>
                </div>

                <div class="footer-2-r">
                    <a
                        href="https://id.heytap.com/index.html?callback=https%3A%2F%2Fwww.heytap.com%2Fcn%2Fweb%2F&language=zh-CN&channelId=1000343">
                        <img src="../imgs/b5d8f97.svg" alt="#">
                        <span>在线客服</span>
                    </a>
                    <p>400-1999-666</p>
                    <p>24小时全国热线</p>
                </div>
            </div>

            <div class="footer-3">
                <div>
                    <span>© 2021 欢太 版权所有 </span>
                    <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备14012291号 </a>
                    <span>|</span>
                    <a href="https://www.heytap.com/legal/privacy/privacy-policies.html" target="_blank">隐私政策</a>
                    <span>|</span>
                    <a href="https://www.heytap.com/legal/privacy/user-agreement.html" target="_blank">用户使用协议</a>
                    <span>|</span>
                    <a href="https://www.heytap.com/legal/privacy/show-license.html" target="_blank">资质证照</a>
                    <span>|</span>
                    <a href="https://www.heytap.com/legal/privacy/intellectual-property.html" target="_blank">知识产权</a>
                </div>

                <div>
                    <img src="../imgs/footer-biaozhi.png" alt="">
                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44190002004935">粤公网安备
                        44190002004935号</a>
                </div>
            </div>

        </div>
    </footer>
</body>

</html>